<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<!--html语言属性 简体中文(繁体中文为zh-cmn-Hant，英文为en)-->

	<head>
		<!--声明文档字符编码-->
		<meta charset="utf-8">
		<!--优先使用 IE 最新版本和 Chrome-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!--移动端配置-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<!--<meta http-equiv="Cache-Control" content="max-age=0">-->
		<meta http-equiv="Cache-Control:private" content="max-age=0">
		<meta name="apple-touch-fullscreen" content="yes">
		<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 设置苹果工具栏颜色 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止缓存-->
		<!--<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
		<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />-->
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!--百度禁止转码-->
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 微软的老式浏览器 -->
		<meta name="MobileOptimized" content="320">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- windows phone 点击无高光 -->
		<meta name="msapplication-tap-highlight" content="no">
		<!--页面标题-->
		<title>中交美庐城</title>
		<!--include default css-->
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<!--include default js-->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.imgpreload.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/loading.music.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--include custom css js-->
		<script type="text/javascript">
			$(document).ready(function() {

				var screenWidth = $(window).width();
				var screenHeight = $(window).height();
				var wrongClickNum = 0,
					rightClickNum = 0,
					againPlayNum = 0,
					tipTimer, time, timer, timer2, timer3, timer4;

				// 图片预加载
				var img_list = [];
				$("div.swiper-container img").each(function() {
					img_list.push(this.src);
				});
				jQuery.imgpreload(img_list, {
					each: function() {
						//each，每次加载完一张图片后，执行此匿名函数中的代码
						//var status = $(this).data('loaded') ? 'success' : 'error';
					},
					all: function() {

						//音乐播放
						createIndexAudio(true);

						//all，当所有图片加载完毕之后，执行此函数体内的内容
						$("div.loading_container").delay(500).fadeOut(300, function() {
							$("#swiper-one").height(screenHeight).width(screenWidth).fadeIn(300);
							var mySwiperOne, mySwiperTwo, mySwiperThree;
							mySwiperOne = new Swiper('#swiper-one', {
								direction: 'vertical',
								noSwiping: 'true',
								noSwipingClass: 'swiping-no-swiping',
								onInit: function(swiper) {
									swiperAnimateCache(swiper); //先清除掉swiper的缓存
									swiperAnimate(swiper); //重新调用swiper
									window.setTimeout(function() {
										$("img.pages_start").removeClass("fadeInUp").addClass("infinite pulse").css("animation-delay", "0s");
									}, 4000);
								},

								onSlideChangeEnd: function(swiper) {
									swiperAnimate(swiper);

								}

							});

							//开始找茬
							$("img.pages_start").on("touchstart", function(e) {
								e.preventDefault();
								$("#swiper-two").width(screenWidth).height(screenHeight);
								$("img.pages_start").removeClass("infinite pulse").addClass("fadeInUp");
								$("#swiper-one").hide();
								$("#swiper-two").show();
								clearSwiperAnimate();
								$('#swiper-one').find("img.ani").removeAttr("style");
								mySwiperTwo = new Swiper('#swiper-two', {
									direction: 'horizontal',
									noSwiping: 'true',
									noSwipingClass: 'swiping-no-swiping',
									onInit: function(swiper) {
										swiperAnimateCache(swiper);
										swiperAnimate(swiper);

										fnStartCountDown(); //调用倒计时函数     //倒计时总共用掉17S
										//当时间结束时做出的动画
										window.setTimeout(function() {
											$(".pages02_02").show();
										}, 17000);

										window.setTimeout(function() {
											$(".pages02_02").removeClass("fadeInUp").addClass("pulse infinite").css("animation-delay", "0s");
										}, 18500);

									},
									onSlideChangeEnd: function(swiper) {
										swiperAnimate(swiper);

									}
								});
								mySwiperTwo.slideTo(0, 300, true);
								//开始倒计时
								function fnStartCountDown() {
									// 显示时间
									if(timer2) window.clearInterval(timer2);
									if(timer3) window.clearInterval(timer3);
									timer2 = window.setTimeout(function() {
										$("div.process_box").show();
										time = 15;
										timer3 = window.setInterval(function() {
											if(time < 0) {
												window.clearInterval(timer3);
												$("section.js_msg_fail").removeClass("visibility_hidden").fadeIn(600);
												$("img.pages_fail_first").show();
												$("img.pages_fail_fifth").hide();
												return "";
											}
											if(time < 10) time = "0" + time;
											$("div.process_box span").html(time);
											time--;
										}, 1000);
									}, 1000);

								}

								$(".pages02_02").on("touchstart", function(e) {
									e.preventDefault();
									$(this).hide();
									$(".pages02_03").show();
									window.setTimeout(function() {
										$(".pages02_03").removeClass("fadeInUp").addClass("pulse infinite").css("animation-delay", "0s");
									}, 1500);
								});

								$(".pages02_03").on("touchstart", function(e) {
									e.preventDefault();
									$(this).hide();
									$(".pages02_04").show();
									
								});

								

							});

							//点击变亮
							$(".pages02_01").on("touchstart", function(event) {
								var _touch = event.originalEvent.targetTouches[0]; //这个是判断弄得手指头是第一个的时候的坐标    //手机端要获取第一个触点
								var X = _touch.pageX - 30;
								//或者var _x=e.touches[0].pageX;   这个是原生JS
								var Y = _touch.pageY - 30;
								$(".light").css({
									left: X + "px",
									top: Y + "px"
								});

								$(".pages02_01").on("touchend", function(event) {
									$(".light").css({
										left: "",
										top: ""
									});
								})
							});

						});

					}
				});

			});
		</script>
	</head>

	<body>
		<!-- container start-->
		<div class="container">
			<!-- 微信分享logo -->
			<div class="wechat_container hide">
				<!-- <img src="images/pages_share_logo.jpg" width="100%" /> -->
			</div>
			<!-- loading_container start-->
			<div class="loading_container">
				<img class="loading_outer" src="images/loading_outer.png" width="100%" />
				<img class="loading_inner" src="images/loading_inner.png" width="100%" />
				<img class="loading_logo" src="images/loading_logo.png" width="100%" />
				<img class="loading_text" src="images/loading_text.png" width="100%" />
				<img class="loading_point" src="images/loading_point.png" width="100%" />
			</div>
			<!-- loading_container //end-->
			<!--fn-声音显示 -->
			<div class="topCon fadeInDown animated1s delay2s">
				<div id="imgMusicBtn" class="sound rotateAm" onclick="SwitchMusic();"></div>
				<input type="hidden" name="PauseTime" id="PauseTime" />
			</div>
			<!--fn-声音显示 end-->

			<!-- swiper-container start-->
			<!-- img[src=images/pages01_$$.png class="pages01_$$ ani" effect=fadeIn duration=1s delay=0.5s width=100%]*10 -->
			<div class="swiper-container hide" id="swiper-one">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiping-no-swiping">
						<img src="images/pages01_bg.jpg" width="100%" height="100%" />
						<img src="images/pages01_01.png" alt="" class="pages01_01 ani abs" effect="fadeInDown" duration="1s" delay="0.5s" width="100%" />
						<img src="images/pages01_02.png" alt="" class="pages01_02 ani abs" effect="zoomIn" duration="1s" delay="1.5s" width="100%" />
						<img src="images/pages01_03.png" alt="" class="pages01_03 ani abs" effect="fadeIn" duration="0.5s" delay="2s" width="100%" />
						<img src="images/pages_start.png" alt="" class="pages_start ani abs" effect="fadeInUp" duration="1s" delay="3s" width="100%" />
					</div>

				</div>
				<!--<div class="swiper-pagination"></div>-->
				<!--<img class="arrows-down infinite fadeInUp animated" src="images/arrow-down.png" />-->
			</div>
			<!-- swiper-container //end
				
					<!-- swiper-container start-->
			<!-- img[src=images/pages01_$$.png class="pages01_$$ ani" effect=fadeIn duration=1s delay=0.5s width=100%]*10 -->
			<div class="swiper-container hide" id="swiper-two">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiping-no-swiping">
						<img src="images/pages02_bg.jpg" width="100%" height="100%" />
						<img src="images/pages02_01.png" alt="" class="pages02_01" width="100%" />
						<img src="images/light.png" alt="" class="light" width="100%" />
						<div class="process_box abs hide"><span>15</span>s</div>
						<img class="pages02_02 hide ani abs" src="images/pages02_02.png" effect="fadeInUp" duration="1s" delay="0.5s" width="100%" />
						<img class="pages02_03 hide ani abs" src="images/pages02_03.png" effect="fadeInUp" duration="1s" delay="0.5s" width="100%" />
						<img class="pages02_04 hide ani abs" src="images/pages02_04.png" effect="fadeInUp" duration="1s" delay="0.5s" width="100%" />
					</div>

				</div>
				<!--<div class="swiper-pagination"></div>-->
				<!--<img class="arrows-down infinite fadeInUp animated" src="images/arrow-down.png" />-->
			</div>
			<!-- swiper-container //end-->

		</div>
		<!--container //end-->

	</body>

</html>